<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //虚拟代理实现图片预加载
        //引入代理对象 proxyImage，通过这个代理对象
        //在图片被真正加载好之前，页面中将出现一张占位图
        var myImage = (function(){
            var imgNode = document.createElement('img');
            document.body.appendChild(imgNode);
            return function(src){
                imgNode.src = src;
            }
        })()

        var proxyImage = (function(){
            var img = new Image;
            img.onload = function(){
                myImage(this.src)
            }
            return function(src){
                myImage('file:// /C:/Users/svenzeng/Desktop/loading.gif' );
                img.src = src;
            }
        })()
    </script>
</body>
</html>